import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    isDark: false,
    theme: 'light', // light | dark
    systemTheme: 'light', // 系统主题偏好
    isAuto: false // 是否跟随系统主题
  }),
  
  getters: {
    currentTheme: (state) => state.theme,
    isDarkMode: (state) => state.isDark,
    isSystemTheme: (state) => state.isAuto
  },
  
  actions: {
    toggleTheme() {
      this.isDark = !this.isDark
      this.theme = this.isDark ? 'dark' : 'light'
      this.isAuto = false // 手动切换时关闭自动模式
      this.applyTheme()
      this.saveTheme()
    },
    
    setTheme(theme) {
      this.theme = theme
      this.isDark = theme === 'dark'
      this.isAuto = false
      this.applyTheme()
      this.saveTheme()
    },
    
    setAutoTheme() {
      this.isAuto = true
      this.systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
      this.theme = this.systemTheme
      this.isDark = this.systemTheme === 'dark'
      this.applyTheme()
      this.saveTheme()
    },
    
    applyTheme() {
      const html = document.documentElement
      const body = document.body
      
      if (this.isDark) {
        html.classList.add('dark')
        html.setAttribute('data-theme', 'dark')
        body.classList.add('dark')
      } else {
        html.classList.remove('dark')
        html.setAttribute('data-theme', 'light')
        body.classList.remove('dark')
      }
      
      // 添加主题切换动画类
      html.classList.add('theme-transition')
      setTimeout(() => {
        html.classList.remove('theme-transition')
      }, 300)
    },
    
    saveTheme() {
      const themeData = {
        theme: this.theme,
        isAuto: this.isAuto,
        timestamp: Date.now()
      }
      localStorage.setItem('theme', JSON.stringify(themeData))
    },
    
    loadTheme() {
      try {
        const saved = localStorage.getItem('theme')
        if (saved) {
          const themeData = JSON.parse(saved)
          this.theme = themeData.theme || 'light'
          this.isAuto = themeData.isAuto || false
          this.isDark = this.theme === 'dark'
          this.applyTheme()
          return true
        }
      } catch (error) {
        console.warn('Failed to load theme from localStorage:', error)
      }
      return false
    },
    
    initTheme() {
      // 强制使用亮色主题作为默认主题
      this.theme = 'light'
      this.isDark = false
      this.isAuto = false
      this.applyTheme()
      this.saveTheme()
      
      // 监听系统主题变化
      this.watchSystemTheme()
    },
    
    detectSystemTheme() {
      // 默认使用亮色主题，不跟随系统
      this.systemTheme = 'light'
      this.theme = 'light'
      this.isDark = false
      this.isAuto = false
      this.applyTheme()
    },
    
    watchSystemTheme() {
      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
      const handleChange = (e) => {
        if (this.isAuto) {
          this.systemTheme = e.matches ? 'dark' : 'light'
          this.theme = this.systemTheme
          this.isDark = e.matches
          this.applyTheme()
          this.saveTheme()
        }
      }
      
      mediaQuery.addEventListener('change', handleChange)
      
      // 返回清理函数
      return () => {
        mediaQuery.removeEventListener('change', handleChange)
      }
    }
  }
})
